<script setup lang="ts">
import { ArticleLikeVo, LikeQuery } from "@/api/article-like/type";
import { Search, Refresh } from "@element-plus/icons-vue";
import { pageArticleLikeApi } from "@/api/article-like";
import { getCategoryOptionsApi } from "@/api/category";
import { getTagOptions } from "@/api/tag";
import { getConvertDateTime } from "@/utils/dateUtil";

// 查询参数信息
const queryParams = reactive<LikeQuery>(<LikeQuery>{
  pageNum: 1,
  pageSize: 10,
});
// 分类列表
const categoryList = ref<SelectBox[]>(<SelectBox[]>[]);
// 标签列表
const tagList = ref<SelectBox[]>(<SelectBox[]>[]);
// 查询框
const queryFormRef = ref(ElForm);
const dataTableRef = ref();
const ids = ref([]);
const total = ref(0);
const tableLoading = ref(false);
const dataList = ref(<ArticleLikeVo[]>[]);

const getDataList = () => {
  tableLoading.value = true;
  pageArticleLikeApi(queryParams)
    .then(({ data: res }) => {
      dataList.value = res.data.records;
      total.value = res.data.total;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};

// 查询操作
const handleQuery = () => {
  queryParams.pageNum = 1;
  getDataList();
};

const resetQuery = () => {
  queryFormRef.value.resetFields();
  handleQuery();
};

const handleDelete = (articleId?: number) => {};

const openDialog = (articleId?: number) => {};

const handleSelectionChange = () => {};

const handleUpdate = (data: any) => {};

const getCategoryList = () => {
  // 获取分类列表
  getCategoryOptionsApi().then(({ data: res }) => {
    categoryList.value = res.data;
  });
};

const getTagList = () => {
  // 获取标签列表
  getTagOptions().then(({ data: res }) => {
    tagList.value = res.data;
  });
};

const viewArticle = (articleId: number) => {
  return `${import.meta.env.VITE_APP_BLOG_WEB_API}/article/${articleId}`;
};

const isShowTag = (tags: string, item: SelectBox): boolean => {
  return !!(tags && tags.split(",").map(Number).includes(item.value));
};

onMounted(() => {
  getCategoryList();
  getTagList();
  getDataList();
});
</script>

<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="文章名称" prop="title">
          <el-input
            style="width: 200px"
            v-model="queryParams.title"
            placeholder="请输入文章名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="分类" prop="categoryId">
          <el-select
            class="!w-[120px]"
            v-model="queryParams.categoryId"
            clearable
            placeholder="分类"
          >
            <el-option
              v-for="item in categoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="tagId">
          <el-select
            class="!w-[120px]"
            v-model="queryParams.tagId"
            clearable
            placeholder="标签"
          >
            <el-option
              v-for="item in tagList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button :icon="Search" type="primary" @click="handleQuery"
            >搜索</el-button
          >
          <el-button :icon="Refresh" @click="resetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button
          type="danger"
          plain
          :disabled="ids.length === 0"
          @click="handleDelete()"
          ><i-ep-delete />删除</el-button
        >
      </template>
      <el-table
        ref="dataTableRef"
        v-loading="tableLoading"
        :data="dataList"
        highlight-current-row
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="封面" prop="cover">
          <template #default="scope">
            <el-image
              class="article-cover"
              fit="cover"
              :src="scope.row.cover"
            />
          </template>
        </el-table-column>
        <el-table-column label="文章标题" align="center" prop="title">
          <template #default="scope">
            <el-link
              :underline="false"
              :href="viewArticle(scope.row.articleId)"
              :target="'_blank'"
            >
              {{ scope.row.title }}
            </el-link>
          </template>
        </el-table-column>

        <el-table-column label="分类" align="center" prop="categoryId">
          <template #default="scope">
            <el-tag
              v-for="(item, index) in categoryList"
              :key="index"
              v-show="scope.row.categoryId === item.value"
              type="success"
              >{{ item.label }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column label="标签" align="center" prop="tags">
          <template #default="scope">
            <el-tag
              v-for="(item, index) in tagList"
              :key="index"
              v-show="isShowTag(scope.row.tags, item)"
              type="success"
              style="margin-left: 5px"
              >{{ item.label }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="浏览量" align="center" prop="viewCount">
          <template #default="scope">
            <el-tag type="success">{{ scope.row.viewCount }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="点赞量" align="center" prop="likeCount">
          <template #default="scope">
            <el-tag type="success">{{ scope.row.likeCount }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center" prop="createTime">
          <template #default="scope">
            {{ getConvertDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              link
              @click="handleDelete(scope.row.id)"
            >
              <i-ep-delete />删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getDataList"
      />
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.article-cover {
  max-width: 150px;
  max-height: 120px;
}
</style>
